<!-- 购物车弹出组件 -->
<template>
  <div class="cart-info">
    <div class="cart-info-header">
      <div class="all-check">
        <i class="iconfont" v-if="allCheck" @click="$store.commit('checkAll',{shopId,status:false})">&#xe6e6;</i>
        <i class="iconfont" v-if="!allCheck" @click="$store.commit('checkAll',{shopId,status:true})">&#xe6e7;</i>
        全选
      </div>
      <div class="clear" @click="$store.commit('clear',shopId)">清空购物车</div>
    </div>
    <div class="cart-info-main">
      <div class="product-item" v-for="item in productList" :key="item._id">
        <i class="iconfont main-check" v-if="item.check" @click="$store.commit('check',{shopId,productId:item._id})">&#xe6e6;</i>
        <i class="iconfont main-check" v-if="!item.check" @click="$store.commit('check',{shopId,productId:item._id})">&#xe6e7;</i>
        <img :src="item.imgUrl" class="item-img">
        <div class="item-content">
          <div class="item-content-name">{{ item.name }}</div>
          <div class="item-content-info">
            <div class="price">￥{{ item.price }}</div>
            <div class="oldPrice">￥{{ item.oldPrice }}</div>
          </div>
        </div>
        <div class="item-btn">
          <div class="sub" v-if="item.count">
            <div class="sub-btn" @click="handleSub(item)">-</div>
            <div class="sub-count">{{ item.count }}</div>
          </div>
          <div class="add" @click="handleAdd(item)">+</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { ref, watchEffect } from 'vue';
import { useStore } from 'vuex';
import { useAddSub } from './detailProduct.vue';
// 获取商品信息 
const useStorage = (state, id, emit) => {
  const productList = ref('');
  productList.value = state.cartList[id];
  const allCheck = ref(true);
  // 全部删除后，弹出层自动隐藏
  watchEffect(() => {
    if (!productList.value || Object.keys(productList.value).length === 0) emit('hide');
    // 处理全选按钮
    let result = true ;
    for(let item in productList.value){
      result = result && productList.value[item].check
    }
    allCheck.value = result;
  })
  return { productList,allCheck }
}
// composition
export default {
  name: 'popupCart',
  setup(props, { attrs, emit }) {
    const store = useStore();
    const shopId = attrs.shopId;
    const { productList,allCheck } = useStorage(store.state, attrs.shopId, emit)
    const { handleAdd, handleSub } = useAddSub(shopId, store)
    return { productList, handleAdd, handleSub,shopId,allCheck }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/theme.scss';
@import '@/styles/mixin.scss';

.cart-info {
  background-color: $white;
  position: fixed;
  bottom: 49px;
  left: 0;
  right: 0;
  box-shadow: 0 1px 1px 0 #F1F1F1;
  &-header {
    height: 52px;
    padding: 0 18px;
    box-shadow: 0 1px 1px 0 #F1F1F1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: $theme-font-color;
    .all-check{
      @include item-center;
      .iconfont{
        font-size: 30px;
        color: #0091FF;
        position: relative;
        left: -8px;
      }
    }
  }
  &-main {
    padding: 16px 18px;
    .product-item {
      display: flex;
      justify-content: space-between;
      .main-check{
        align-self: center;
        font-size: 30px;
        color: #0091FF;
        position: relative;
        left: -8px;
      }
      .item-img {
        width: 12.2667vw;
        height: 12.2667vw;
        margin-right: 16px;
      }
      &+.product-item {
        margin-top: 12px;
      }
      .item-content {
        @include content-name;
        &-info {
          @include content-info;
        }
      }
      .item-btn {
        display: flex;
        align-self: center;
      }
      @include add-sub-btn;
    }
  }
}
</style>
